body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #dd3c54;
}

.bell {
    position: absolute;
    top: 173px;
    left: 175px;
    fill: #fff;
    transform-origin: 50% 0;
    animation: shake 2.5s ease infinite;
}

.line {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    stroke-linecap: round;
}

.line-1,
.line-2,
.line-3 {
    position: absolute;
    top: 170px;
    left: 230px;
}

.line-4,
.line-5,
.line-6 {
    position: absolute;
    top: 170px;
    right: 230px;
}

.line-1 {
    animation: line-1 2.5s ease-out infinite both;
}
.line-2 {
    animation: line-2 2.5s ease-out infinite both;
}
.line-3 {
    animation: line-3 2.5s ease-out infinite both;
}
.line-4 {
    animation: line-4 2.5s ease-out infinite both;
}
.line-5 {
    animation: line-5 2.5s ease-out infinite both;
}
.line-6 {
    animation: line-6 2.5s ease-out infinite both;
}

@keyframes line-1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    50%,
    100% {
        transform: translate3d(60px, 0, 0) scale(2);
        opacity: 0;
    }
}
@keyframes line-2 {
    0%,
    19% {
        opacity: 0;
    }
    20% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    70%,
    100% {
        transform: translate3d(60px, 0, 0) scale(2);
        opacity: 0;
    }
}
@keyframes line-3 {
    0%,
    39% {
        opacity: 0;
    }
    40% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    90%,
    100% {
        transform: translate3d(60px, 0, 0) scale(2);
        opacity: 0;
    }
}
@keyframes line-4 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    50%,
    100% {
        transform: translate3d(-60px, 0, 0) scale(2);
        opacity: 0;
    }
}
@keyframes line-5 {
    0%,
    19% {
        opacity: 0;
    }
    20% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    70%,
    100% {
        transform: translate3d(-60px, 0, 0) scale(2);
        opacity: 0;
    }
}
@keyframes line-6 {
    0%,
    39% {
        opacity: 0;
    }
    40% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    90%,
    100% {
        transform: translate3d(-60px, 0, 0) scale(2);
        opacity: 0;
    }
}

@keyframes shake {
    0%,
    50%,
    100% {
        transform: rotate(0);
    }
    5%,
    10%,
    15%,
    20%,
    25%,
    30%,
    35%,
    40% {
        transform: rotate(6deg);
    }
    45% {
        transform: rotate(4deg);
    }
    7.5%,
    12.5%,
    17.5%,
    22.5%,
    27.5%,
    32.5%,
    37.5%,
    42.5% {
        transform: rotate(-6deg);
    }
    47.5% {
        transform: rotate(-2deg);
    }
}
